import React, { PureComponent, Fragment } from 'react';
import { Modal, Form, Input, Button, message, Select } from 'antd';
import { connect } from 'dva';
// import styles from './addEdit.less';
const Option = Select.Option;
/**
 * 添加用户组件
 */
@connect(({ user_manage }) => ({
  user_manage,
}))
@Form.create()
class AddEditUser extends PureComponent {

  //挂载
  componentDidMount() {
    //console.log("add+edit")
    const { dispatch } = this.props;
    dispatch({
      type: 'user_manage/getRoleList',
    })
  }

  state = {
    visible: false
  }

  showModal = () => {
    this.setState({ visible: true });
  }

  handleOk = () => {
    const { onSave, record } = this.props;
    this.props.form.validateFields((err, values) => {
      if (!err) {
        if (JSON.stringify(record) === '{}') {
          const { data } = this.props.user_manage;
          for (let i in data) {
            if (values.name === data[i].name) {
              message.error('用户名不能重复')
              return false;
            }
          }
        }
        onSave(values);
        this.handleCancle();
        message.success('操作成功');
        this.resetFields();
      }
    })
  }

  handleCancle = () => {
    this.setState({ visible: false });
    this.resetFields();
  }

  //重置
  resetFields = () => {
    this.props.form.resetFields();
  }

  render() {
    const { children, user_manage} = this.props;
    //console.log('roleList' + JSON.stringify(user_manage.roleList))
   //const option = user_manage.roleList.map(data => '<Option value="china">' + data.name+ '</Option>');
   //onsole.log('roleList' + user_manage.roleList)
    const { id, name, password,role} = this.props.record;
    //console.log('role'+password)
    const getFieldDecorator = this.props.form.getFieldDecorator;
    const formItemLayout = {
      labelCol: { span: 4 },
      wrapperCol: { span: 12 },
    };
    return (
      <Fragment>
        <span onClick={this.showModal}>
          {children}
        </span>
        <Modal
          title={id ? '编辑用户' : '新建用户'}
          visible={this.state.visible}
          onOk={this.handleOk}
          onCancel={this.handleCancle}
        >
          <Form>
            <Form.Item
              {...formItemLayout}
              label="用户名"

            >
              {
                getFieldDecorator('name', {
                  initialValue: name,
                  rules: [{
                    required: true,
                    message: '用户名不能为空'
                  }]
                })(<Input placeholder="用户名" />)
              }
            </Form.Item>
            <Form.Item
              {...formItemLayout}
              label="密码"
            >
              {
                getFieldDecorator('password', {
                  initialValue: password
                })(<Input placeholder="密码" />)
              }

            </Form.Item>
            <Form.Item
              {...formItemLayout}
                  label="角色"
                >
            {
              getFieldDecorator('role',{
                initialValue: role?role.name:undefined
              })(
                <Select placeholder="请选择角色" >
                  {
                    user_manage.roleList !== null ? user_manage.roleList.map(data => <Option key={data.id}>{data.name}</Option>) :<Option key=""></Option>
                   // user_manage.roleList.map(data => <Option value={data.id}>{data.name}</Option>)
                  }
                </Select>
              )
            }
            </Form.Item>
            {
              getFieldDecorator('id', {
                initialValue: id
              })(<Input type="hidden" />)
            }

          </Form>
        </Modal>
      </Fragment>
    )
  }
}

export default AddEditUser;
